<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 搜索框最外边框，动画变化的边框，从圆形变成长条形圆角 -->
    <div class="search-box">
        <!-- 左侧搜索框 -->
        <div class="key">
            <input type="text" placeholder="请输入搜索关键词...">
        </div>
        <!-- 右侧搜索按钮 -->
        <div class="bt">
            <a href="" href="#">
                <i class="iconfont icon-sousuo"></i>
            </a>
        </div>
    </div>
    <script>
        // 搜索框box元素
        var box = document.querySelector('.search-box');

        // 增加监听mouseover事件
        box.addEventListener('mouseover', () => {
            // 增加active样式
            box.classList.add('active');
        });

        // 解决点击搜索框会触发 body.click事件问题
        box.addEventListener('click',(e)=>{
            // 防止事件冒泡
            e.stopPropagation();
        });

        document.body.addEventListener('click', () => {
            // 移除active样式
            box.classList.remove('active');
        });

    </script>
</body>

</html>